<template>
  <div class="company-subject">
    <!--    第一个卡片-->
    <el-card>
      <div class="desc-box">
        <div class="title">学科列表</div>
        <div class="desc">您可以对学科列表进行增删改查操作！</div>
      </div>
      <div class="use-box">
        <div>
          <el-button class="add-button" type="primary" @click="openDialogComponent(0)">添加学科</el-button>
        </div>
        <div class="search-box">
          <span class="current-semester">当前启用的学期 :{{ queryInfo.SemesterName }}</span>

          <div class="search-input">
            <el-input
              v-model="queryInfo.SubjectName" placeholder="请输入学科名称"
              clearable
              @clear="getTableList"
            ></el-input>
          </div>
          <div>
            <el-button
              type="primary"
              class="search-button"
              @click="getTableList()">查询
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <!--    第二个卡片-->
    <el-card class="second-card">
      <el-table
        ref="table"
        border
        max-height="530px"
        v-loading="loading"
        element-loading-text="拼命加载中......"
        :data="tableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        :header-cell-class-name="setHeaderRowClassName"
      >
        <el-table-column type="index" label="序号" fixed></el-table-column>
        <el-table-column prop="Title" label="学期名称" width="220px"></el-table-column>
        <el-table-column prop="SubjectName" label="学科名称" width="120px"></el-table-column>
        <el-table-column prop="Describe" label="学科描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="学科图片">
          <el-image slot-scope="scope"
                    v-if="scope.row.Image"
                    :preview-src-list="imageUrlList"
                    style="max-width: 100px; max-height: 100px"
                    :src="imageUrl+scope.row.Image">
          </el-image>
        </el-table-column>
        <el-table-column label="当前序列" width="250px">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="setSortMethod(scope.row.ID,scope.row.Sort,'Up',queryInfo.SemesterID)">上移
            </el-button>
            <el-button size="mini"
                       @click="setSortMethod(scope.row.ID,scope.row.Sort,'Down',queryInfo.SemesterID)">下移
            </el-button>
            <el-button size="mini"
                       @click="setSortMethod(scope.row.ID,scope.row.Sort,'Top',queryInfo.SemesterID)">置顶
            </el-button>
          </template>

        </el-table-column>
        <el-table-column prop="CreationTime" label="创建时间"
                         :formatter="dateFormat" width="150px">
        </el-table-column>
        <el-table-column label="启停状态" width="110px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.Status" :active-value="1"
              :inactive-value="0" @change="statusChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openDialogComponent(scope.row.ID)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteCurriculumInfo(scope.row.ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>

    </el-card>
    <!--  添加和编辑的对话框-->
    <add-and-edit-dialog
      v-if="isShowDialogComponent"
      :is-show-dialog-component="isShowDialogComponent"
      :title="title"
      :judge-id="judgeId"
      @handleClose="handleClose"
    ></add-and-edit-dialog>
  </div>
</template>

<script>
//引入封装接口的类
import CompanySubject from '../../model/companySubject'
import Semester from '../../model/semester'
//引入添加编辑对话框组件
import AddAndEditDialog from './childComps/AddAndEditDialog'
//引入分页的组件
import Pagination from '../../components/base/pagination/Pagination'

import moment from 'moment'
import Login from '../../model/login'

export default {
  name: 'BaseCurriculum',
  components: {
    AddAndEditDialog,
    Pagination
  },
  data () {
    return {
      loading: false,
      title: '',
      isShowDialogComponent: false,
      judgeId: 0,
      //课程详情列表
      tableData: [],
      //获取列表需要传入的参数
      queryInfo: {
        SubjectName: '',
        SemesterName: '',
        SemesterID: 0,
        Page: 1,
        Limit: 10,
        total: 0
      },
      statusChangeForm: {
        id: '',
        status: ''
      },
      //排序
      sortForm: {
        ID: 0,
        Sort: 0,
        Type: '',
        ExtendID: 0
      },
      //保存图片前缀
      imageUrl: '',
      //表格中图片的大图预览
      imageUrlList: []

    }
  },
  created () {
    this.getTableList()
  },

  methods: {
    //头像大图预览功能的初始化
    initImageUrlList () {
      //遍历teachersData中是否有图片image
      this.tableData.forEach(item => {
        if (!item.Image) {
          //如果没有则return出去
          return
        } else {
          //如果有的话就把图片的地址存到定义的图片数组中
          this.imageUrlList.push(this.imageUrl + item.Image)
        }
      })
    },
    //时间戳
    dateFormat (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    //设置绑定学科的表头样式
    setHeaderRowClassName ({ rowIndex }) {
      if (rowIndex === 0) return 'setHeaderSubjectColumnName'
    },
    handleClose (payload) {
      if (payload === 'submitButton') {
        this.getTableList()
      }
      this.isShowDialogComponent = false
    },
    //分页的回调
    callFather (value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage
      if (value.pageSize) this.queryInfo.Limit = value.pageSize
      this.getTableList()
    },
    //打开添加、编辑话框
    openDialogComponent (id) {
      this.title = id === 0 ? '添加学科' : '编辑学科'
      this.judgeId = id === 0 ? 0 : id
      this.isShowDialogComponent = true
    },
    //获取学科列表
    getTableList () {
      this.$store.dispatch('getCurrentSemester').then(async result => {
        this.queryInfo.SemesterName = result[0].Text
        this.queryInfo.SemesterID = result[0].Value
        this.loading = true
        const res =await CompanySubject.PageSearch(this.queryInfo)
        console.log(res)
        this.loading = false
        this.tableData = res.ListData
        this.imageUrl = res.ImageUrl
        this.queryInfo.total = res.Total
        this.initImageUrlList()
      })
    },
    //删除操作
    async deleteCurriculumInfo (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该学科的操作')
      } else {
        await CompanySubject.Delete({ ID: id })
        this.$message.success('成功删除该学科')
        await this.getTableList()
      }
    },
    //修改启停状态
    async statusChange (rowInfo) {
      this.statusChangeForm.id = rowInfo.ID
      this.statusChangeForm.status = rowInfo.Status
      await CompanySubject.UpdateStatus(this.statusChangeForm)
      this.$message.success('成功修改学科的启停状态')
      await this.getTableList()
    },
    async setSortMethod (ID, Sort, Type, ExtendID) {
      try {
        await CompanySubject.SetSortMethod(ID, Sort, Type, ExtendID)
        await this.getTableList()
      } catch (err) {
      }
    }
  }
}
</script>


<style scoped>
@import "../../../src/assets/style/realize/tableStyle.css";
.company-subject {
  background-color: #eee;
}
.search-box .current-semester {
  font-size: 15px;
  padding: 0 30px;
  color: #DC143C;
  font-weight: bold;
  line-height: 40px;
}
.el-card {
  box-shadow: none;
  margin-top: 10px;
}
.second-card {
  padding-bottom: 50px;
  position: relative;
}
.el-pagination {
  position: absolute;
  right: 20px;
  bottom: 10px;
}
/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #E6E6FA !important;
  opacity: 0.7 !important;
}
/*描述文本域明显一些的样式，设置高度*/
/deep/ .el-textarea__inner {
  height: 150px;
}

</style>


